<template>
	<div class="app">
		<h2>{{ message }}</h2>
		<button @click="changeMessage">修改message</button>
		<hr />

		<h2>{{ info.name }} {{ info.age }}</h2>
		<button @click="changeInfo">修改info数据</button>
	</div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
export default {
	setup() {
		const message = ref('hello vue')
		watch(message, (newVal, oldVal) => {
			console.log('newVal, oldVal: ', newVal, oldVal)
		})
		function changeMessage() {
			message.value = 'hello world'
		}

		const info = reactive({
			name: 'why',
			age: 18,
			friend: {
				name: 'kobe',
			},
		})
		/* watch(
			info,
			(newVal, oldVal) => {
				// newVal, oldVal是相同的Proxy对象, 但是内部是不同引用
				console.log('newVal, oldVal: ', newVal, oldVal)
				console.log(newVal === oldVal)
			},
			{
				// immediate: 已进入组件就执行侦听
				immediate: true,
			}
		) */

		// 暂停reactive数据变化后, 获取普通对象
		watch(
			() => ({ ...info }),
			(newVal, oldVal) => {
				console.log('newVal, oldVal: ', newVal, oldVal)
			},
			{
				immediate: true,
				deep: true,
			}
		)

		function changeInfo() {
			// info.name = 'zs'
			info.friend.name = 'zs'
		}

		return {
			message,
			changeInfo,
			info,
			changeMessage,
		}
	},
}
</script>

<style scoped></style>
